<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <el-card class="box-card">
            <div class="clearfix">
              <span>个人信息</span>
            </div>
            <div>
              <div class="text-center">
                <!-- <userAvatar /> -->
              </div>
              <ul class="list-group list-group-striped">
                <li class="list-group-item">
                    <el-icon><UserFilled /></el-icon>姓名
                  <div class="pull-right">{{ user.username }}</div>
                </li>
                <li class="list-group-item">
                    <el-icon><Female /></el-icon>部门
                  <div class="pull-right">{{ user.department }}</div>
                </li>
                <li class="list-group-item">
                    <el-icon><Iphone /></el-icon>学位
                  <div class="pull-right">{{ user.degree }}</div>
                </li>
                <li class="list-group-item">
                    <el-icon><Message /></el-icon>职称
                  <div class="pull-right">{{ user.position }}</div>
                </li>
                <li class="list-group-item">
                    <el-icon><Location /></el-icon>职务
                  <div class="pull-right">{{ user.address }}</div>
                </li>
                <!-- <li class="list-group-item">
                    <el-icon><Avatar /></el-icon>所属角色
                  <div class="pull-right">{{ user.role }}</div>
                </li> -->
                
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="18" :xs="24">
          <el-card>
            <div class="clearfix">
              <span>基本资料</span>
            </div>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="基本资料" name="userinfo">
                <userInfo :user="user" />
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="resetPwd">
                <resetPwd />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  // 引入必要的库和组件
  import { ref, onMounted } from 'vue';
  import userInfo from './userInfo';
  import resetPwd from './resetPwd';
//   import userAvatar from './userAvatar'; // 确保你有这个组件或根据实际情况调整
  import { getUserProfile } from "@/api/user";
  
  // 定义响应式数据
  const user = ref({});
  // const roleGroup = ref({});
  // const postGroup = ref({});
  const activeTab = ref("userinfo");

  
  // 定义获取用户信息的方法
  const getUser = async () => {
    try {
      const response = await getUserProfile();
      // user.value = response.data;
      user.value = response.user;
      user.value.role = user.value.role === '1' ? '用户' : '管理员';
      console.log(user.value)
      // roleGroup.value = response.roleGroup;
      // postGroup.value = response.postGroup;
    } catch (error) {
      console.error("Failed to fetch user profile:", error);
    }
  };
  
  // 组件挂载时调用 getUser 方法
  onMounted(getUser);
  
  // 注册组件（在 <script setup> 中可以直接导入并使用）
  // defineExpose({ user, roleGroup, postGroup, activeTab });
  
  // 如果需要定义组件选项（如 name），可以使用 defineComponent 或 defineCustomElement
  // import { defineComponent } from 'vue';
  // export default defineComponent({
  //   name: "Profile",
  // });
  </script>

<style>
.list-group-item{
  padding: 16px 0 !important;
}
</style>
  